<template>
  <div id="home-product" class="component">
    <div id="home-product-main" class="ptop">
      <div class="slogen"></div>
      <!--产品项切换组件-->
      <transition name="product-move">
        <div class="product-container" v-show="isShow">
          <productSwitch></productSwitch>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
  import productSwitch from '@/components/home/productSwitch'
  export default{
    data () {
      return {}
    },
    props: {
      isShow: {
        type: Boolean
      }
    },
    components: {
      productSwitch
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #home-product
    text-align: center
    background-image: url('../../assets/home/home-bg2.png')
    #home-product-main
      .slogen
        background-image: url("../../assets/home/product.png")
      .product-container
        position: relative
        opacity:1
        top: 40%
        transform scale(1)
        transition: all 0.4s ease-out 0s
        &.product-move-enter-active
          opacity:1
          transform scale(1)
        &.product-move-enter,&.product-move-leave-active
          opacity:0
          transform scale(0)
</style>
